import React, { useState } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { gql, useQuery } from '@apollo/client';
import fetch from 'API/fetch';
import notification from '@kuiper-components/notification';
import Select, { Option } from '@kuiper-components/select';

import s from './NameTargetSelect.module.css';

const QUERY_GQL = gql`
	query TargetNoteList($filter: FilterFindManyJobInput) {
		JobMany(limit: 0, filter: $filter) {
			_id
			targetUrl
			note
		}
	}
`;

export default function NameTargetSelect({
	className,
	value: valueProp,
	filter,
	disabled,
	onChange,
}) {
	// const { data } = useQuery(QUERY_GQL, {
	// 	fetchPolicy: 'cache-and-network',
	// 	variables: { filter },
	// });
	const [data, setData] = useState([])
	const getData = () => {
		fetch('/api/v2/cloud/cyd_enable/jobs', {
			method: 'GET',
		})
			.then(res => {
				if (res.code === 200) {
					setData(res.result);
				}
			})
			.catch(e => {
				notification.error({
					message: e.message,
					placement: 'top',
				});
			});
	}
	const { noteList, noteTargetMap = {}, targetNoteMap } = React.useMemo(() => {
		const noteTargetMap = data?.reduce((obj, x) => {
			if (!obj[x.note]) obj[x.note] = {};
			obj[x.note][x.targetUrl] = x.job_id;
			return obj;
		}, {});
		const targetNoteMap = data?.reduce((obj, x) => {
			obj[x.job_id] = x.note;
			return obj;
		}, {});
		return {
			noteTargetMap,
			targetNoteMap,
			noteList: Object.keys(noteTargetMap || {}),
		};
	}, [data]);
	const [value, setSelectedJobId] = React.useState(valueProp);
	const [selectedNote, setSelectedNote] = React.useState(
		targetNoteMap ? targetNoteMap[value] : null
	);
	React.useMemo(() => {
		if (valueProp === value) return;
		setSelectedJobId(valueProp);
		targetNoteMap && setSelectedNote(targetNoteMap[valueProp]);
	}, [valueProp]);
	React.useMemo(() => {
		if (!targetNoteMap) return;
		const note = targetNoteMap[valueProp || value];
		if (note !== selectedNote) {
			setSelectedNote(note);
		}
	}, [targetNoteMap]);
	const targetList = noteTargetMap[selectedNote] || {};

	const handleSelectJobId = jobId => {
		setSelectedJobId(jobId);
		onChange(jobId);
	};
	const handleSelectNote = note => {
		handleSelectJobId(null);
		setSelectedNote(note);
	};
	React.useEffect(() => {
		getData()
	}, [])

	return (
		<div className={cn(className, s.nameTargetSelect)}>
			<div className={s.item}>
				<span className={s.field}>资产名称:</span>
				<Select
					className={s.select}
					disabled={disabled}
					value={selectedNote}
					onChange={handleSelectNote}
					placeholder={'请选择资产名称'}
				>
					{noteList.map(x => (
						<Option key={x} value={x}>
							{x}
						</Option>
					))}
				</Select>
			</div>
			<div className={s.item}>
				<span className={s.field}>资产地址:</span>
				<Select
					className={s.select}
					disabled={disabled}
					value={value}
					onChange={handleSelectJobId}
					placeholder={'请选择资产地址'}
				>
					{Object.entries(targetList).map(([targetUrl, _id]) => (
						<Option key={_id} value={_id}>
							{targetUrl}
						</Option>
					))}
				</Select>
			</div>
		</div>
	);
}

NameTargetSelect.propTypes = {
	className: PropTypes.string,
	value: PropTypes.string,
	filter: PropTypes.shape({
		note: PropTypes.string,
		targetUrl: PropTypes.string,
	}),
	disabled: PropTypes.bool,
	onChange: PropTypes.func,
};

NameTargetSelect.defaultProps = {
	className: s.nameTargetSelect,
	filter: {},
	disabled: false,
	onChange: x => x,
};
